<template>
  <div class="company">
    <div class="company-add">
      <el-button type="primary" size="small" @click="add">新增</el-button>
    </div>
    <tables :tableData="tableData" :params="params" @dels="dels">
      <template v-slot:rightBtn="row">
        <el-button type="text" @click="edit(row)">编辑</el-button>
      </template>
    </tables>
    <dialogs :dialogVisible="dialogVisible" @changeVisible="changeVisible">
      <template v-slot:content>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="公司名称" prop="companyName">
            <el-input v-model="ruleForm.companyName" placeholder="请输入公司名称"></el-input>
          </el-form-item>
          <el-form-item label="联系方式" prop="phone" >
            <!-- .number 修饰符 -->
            <el-input type="number" v-model.number="ruleForm.phone" placeholder="请输入联系方式"></el-input>
          </el-form-item>
          <el-form-item label="企业类型" prop="companyType">
            <el-select v-model="ruleForm.companyType" placeholder="请选择公司类型">
              <el-option v-for="(item,index) in cTypes" :key="index" :label="item.key" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="公司地址" prop="address" >
            <el-input type="text" v-model="ruleForm.address" placeholder="请输入公司地址"></el-input>
          </el-form-item>
          <el-form-item label="">
            <el-button type="primary" size="small" @click="submit('ruleForm')">确定</el-button>
            <el-button  size="small" @click="dialogVisible = false">取消</el-button>
          </el-form-item>
        </el-form>
      </template>
    </dialogs>
  </div>
</template>
<script>
import Tables from "@/components/Table/Table";
import Dialogs from "@/components/Dialog/Dialog.vue"
export default {
  data() {
    return {
      tableData: [], //后端传递的数据
      params: [
        {
          key: 'companyName',
          value: '公司名称'
        },
        {
          key: 'phone',
          value: '联系方式'
        },
        {
          key: 'companyType',
          value: '企业类型'
        },
        {
          key: 'address',
          value: '地址'
        }
      ],
      cTypes: [
        {
          key: '国有企业',
          value: '1',
        },
        {
          key: '私有企业',
          value: '2'
        }
      ],
      ruleForm: {
        companyName: '',
        phone: '',
        companyType: '',
        address: ''
      },
      paramsObj: {},
      rules: {
        companyName: [
          {required: true,message: '请输入公司名称',trigger: 'blur'},
          {min:4,max:10,message: '请输入4到10个汉字',trigger:'blur'}
        ],
        phone: [
          {required: true,message: '请输入联系方式',trigger: 'blur'},
          {pattern: /^[1][3|5|7|8|9]\d{9}$/,message: '请输入正确的电话号码',trigger: 'blur'}
        ],
        companyType: [
          {required: true,message: '请选择联系方式',trigger: 'blur'},
        ],
        address: [
          {required: true,message: '请选择地址',trigger: 'blur'},
        ]
      },
      dialogVisible: false
    }
  },
  components: {
    Tables,
    Dialogs
  },
  mounted() {
    this.getList()
  },
  methods: {
    // 获取列表
    getList() {
      this.$request.get('/company/list',{}).then(res=> {
        console.log(res.data.data,105);
        if(res.data.code) this.tableData = res.data.data;
      })
    },
    //是弹出弹出框，不需要写其他逻辑
    add() {
      if(Object.keys(this.paramsObj).length) {
        this.ruleForm = Object.assign({},this.paramsObj);
      }
      this.dialogVisible = true;
    },
    edit(row) {
      this.paramsObj= Object.assign({},this.ruleForm);
      this.ruleForm = Object.assign({},row.data)
      this.dialogVisible = true;
    },
    submit(formName) {
      let url = '/company/create';
      if(this.ruleForm.id) {
        url = '/company/update';
      }
      this.$refs[formName].validate((valid) => {
        if(valid) {
          this.$request.post(url,this.ruleForm).then(res=> {
            console.log(res,101)
            this.dialogVisible = false;
            this.getList()
          })
        }
      })
    },
    dels(row) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 调用接口删除
          this.deletes(row);
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
    async deletes(row) {
      let params = await this.$request.post('/company/delete',{id: row.id});
      console.log(params);
      if(params.data.code == 200) {
        this.$message({
            type: 'success',
            message: '删除成功'
          }); 
          this.getList()   
      }
    },
    changeVisible() {
      this.dialogVisible = false;
    }
  }
}
</script>
<style lang="scss" scoped>
.company {

  &-add {
    margin-bottom: 10px;
  }
}
</style>